<template>
  <div class="statistics-content statistics-2">
    <div class="statistics-block industry-block full">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="industry" class="chart"></div>
    </div>
    <div class="statistics-block pie">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="industry-labor" class="chart"></div>
    </div>
    <div class="statistics-block demand-gap-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <RankList :rank="demandGapRank"></RankList>
    </div>
    <div class="statistics-block professional-block full">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="professional" class="chart"></div>
    </div>
    <div class="statistics-block pie">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="factors" class="chart"></div>
    </div>
    <div class="statistics-block supply-gap-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <RankList :rank="supplyGapRank"></RankList>
    </div>
  </div>
</template>

<script>
import RankList from "@/components/RankList/RankList";
import {getNum} from "@/utils/utils";
export default {
  name: "Statistics2",
  components: {RankList},
  data(){
    return{
      demandGapRank:{
        title:'需求缺口前10职业排行',
        type:1,
        data:[
          {id:1,name:'保险从业员',num:1636,change:''},
          {id:2,name:'饭店服务人员',num:1572,change:''},
          {id:3,name:'体力工人',num:1312,change:'icon-jiantoushangsheng'},
          {id:4,name:'替工',num:1125,change:''},
          {id:5,name:'其他社会服务人员',num:1199,change:'icon-jiantouxiajiang'},
          {id:6,name:'护理员',num:943,change:''},
          {id:7,name:'计算机工程技术人员',num:897,change:''},
          {id:8,name:'美容美发人员',num:704,change:''},
          {id:9,name:'水产品加工',num:594,change:''},
          {id:10,name:'银行从业人员',num:349,change:''},
        ]
      },
      supplyGapRank:{
        title:'供给缺口前10职业排行',
        type:1,
        data:[
          {id:1,name:'机动车驾驶员',num:1636,change:''},
          {id:2,name:'电工',num:1572,change:''},
          {id:3,name:'装修工',num:1312,change:'icon-jiantoushangsheng'},
          {id:4,name:'清洁工',num:1125,change:''},
          {id:5,name:'仓储人员',num:1199,change:'icon-jiantouxiajiang'},
          {id:6,name:'采购人员',num:943,change:''},
          {id:7,name:'营业员、收银员',num:897,change:''},
          {id:8,name:'秘书、打字员',num:704,change:''},
          {id:9,name:'财务人员',num:594,change:''},
          {id:10,name:'计算机技术员',num:349,change:''},
        ]
      },
    }
  },
  methods: {
    initIndustry() {
      let myCharts = this.$echarts.init(document.getElementById('industry'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          top:15,
          text: '供求行业分组',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          left: '5%',
          right: '0',
          bottom: '15%',
        },
        color: ['#fac85a', '#93cc75'],
        legend: {
          top:15,
          right:0,
          show: true,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
          data: ['需求人数', '求职人数'],
        },
        xAxis: {
          data: ['农、林、牧、渔', '采矿', '制造', '电、热、燃气、水', '建筑', '交通运输、仓储和邮政', '软件和信息技术服务', '批发和零售', '住宿和餐饮', '金融', '房地产', '租赁和商务服务', '科学研究和技术服务', '水利、环境和公共设施管理', '居民服务、修理和其他服务', '教育', '卫生和社会工作', '文化、体育和娱乐', '公共管理、社会保障和社会组织', '国际组织'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            formatter: function (value) {
              var ret = '';
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '需求人数',
          type: 'bar',
          data: [21, 24, 28, 32, 14, 28, 32, 14, 21, 24, 28, 32, 14, 28, 32, 14, 28, 32, 14, 32],
        },
          {
            name: '求职人数',
            type: 'bar',
            data: [201, 204, 208, 302, 104, 208, 302, 104, 201, 204, 208, 302, 104, 208, 302, 104, 208, 302, 104, 302],
          },
        ]
      };
      myCharts.setOption(option);
    },
    initProfessional() {
      let myCharts = this.$echarts.init(document.getElementById('professional'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          top:15,
          text: '供求职业分组',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          left: '9%',
          right: '5%',
          bottom: '5%',
        },
        color: ['#fda864', '#969aff'],
        legend: {
          top:15,
          right:0,
          show: true,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
          data: ['需求人数', '求职人数'],
        },
        xAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        yAxis: {
          type:'category',
          data: ['国家机关负责人','党群组织负责人','企事业单位负责人','办事人员和有关人员','商业工作人员','服务性工作人员','农林牧渔劳动者','生产、运输和部分体力劳动者','其他'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 5;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        series: [{
          name: '需求人数',
          type: 'bar',
          data: [21, 24,21, 24,21, 24,21, 24,24,],
        },
          {
            name: '求职人数',
            type: 'bar',
            data: [201, 204,201, 204,201, 204,201, 204, 204,],
          },
        ]
      };
      myCharts.setOption(option);
    },
    initLabor(){
      let charts = this.$echarts.init(document.getElementById('industry-labor'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        color:['#fac858','#42efa7','#5961f9'],
        title: {
          top:15,
          text: '产业用工情况',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff',
                  formatter:'{b} \n({d}%)',
                  fontSize:14
                }
              }
            },
            data: [
              {value: 67, name: '农业'},
              {value: 86, name: '制造业'},
              {value: 91, name: '服务业'},
            ]
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    },
    initFactors(){
      let charts = this.$echarts.init(document.getElementById('factors'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        color:['#fac858','#42efa7','#5961f9'],
        title: {
          top:15,
          text: '缺工因素分布',
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff',
                  formatter:'{b} \n({d}%)',
                  fontSize:14
                }
              }
            },
            data: [
              {value: 23, name: '结构性失业'},
              {value: 94, name: '待遇较低'},
              {value: 123, name: '劳动力分流'},
            ]
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    }
  },
  mounted() {
    this.initIndustry();
    this.initProfessional();
    this.initLabor()
    this.initFactors()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.statistics-content{
  width:calc(100% - 70px);
  margin: 0 auto;
  margin-top: 30px;
  height: calc(100% - 140px);
  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }
  .statistics-block{
    padding: 10px;
  }
}
.statistics-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .statistics-block {
    height: calc(50% - 10px);
    width: calc((100% - 40px) / 6 * 2);
    position: relative;
    border: $border;
    box-shadow: $boxshadow;
    margin-right: 20px;
  }
  .statistics-block.pie{
    width: calc((100% - 40px) / 6*1.5);
  }

  .statistics-block:nth-child(3n){
    margin-right: 0;
  }
  .statistics-block.full {
    width: calc((100% - 40px) / 6 * 2.5);
  }
}
</style>
